<template>
  <el-card class="home__card-item home__collection">
    <div slot="header" class="home__card-title clearfix">
      <h3>收款趋势</h3>
      <tabs v-model="currentYear" :tabs="months" size="mini" />
    </div>

    <div class="home__card-content">
      <!-- 汇总 -->
      <div class="home__card-content-sum">
        <div class="home__card-content-sum__item">
          <label>{{this.summary.totalAmountText}}</label>
          <span>{{this.summary.totalAmount}}</span>
        </div>
        <div class="home__card-content-sum__item">
          <label>{{this.summary.totalText}}</label>
          <span>{{this.summary.total}}</span>
        </div>
      </div>

      <!-- 详情 -->
      <div class="home__card-content-wrap">
        <!-- 客户 -->
        <div class="home__collection__content">
          <div class="home__collection__echart-wrap">
            <div ref="echart" class="home__collection__echart"></div>
          </div>
        </div>
      </div>
    </div>
  </el-card>
</template>

<script>
import * as echarts from 'echarts';
import Tabs from "./tabs.vue";
import { collectionTrend } from '@/api/report/report'
export default {
  data() {
    return {
      currentYear: "this",
      months: [
        { name: "去年", value: "last" },
        { name: "今年", value: "this" },
      ],
      summary: {},
      instances: {},
      echartData: [
        {
          name: '张三',
          money: 30,
          value: 30,
        },
        {
          name: '李四',
          money: 40,
          value: 40,
        },
        {
          name: '王五',
          money: 10,
          value: 10,
        },
      ],
    };
  },

  components: {
    Tabs,
  },
    created() {
    this.collectionTrend()
  },
  watch: {
      currentYear(){
         this.collectionTrend()
      },

    },
  mounted() {
    window.addEventListener('resize', this.handleResize);
    this.$once('hook:beforeDestroy', () => {
      window.removeEventListener('resize', this.handleResize);
    });
    this.setOptions();
  },

  methods: {
    collectionTrend() {
      var queryParams = {
        year: this.currentYear
      }
      collectionTrend(queryParams).then((response) => {
        this.summary = response.data.summary
        this.echartData = response.data.chartList
        this.setOptions()
      })
    },
    setOptions() {
      this.$nextTick(() => {
        // 圆饼
        this.instances.echart = echarts.init(this.$refs.echart);
        this.instances.echart.setOption({
          grid: {
            left: 30,
            top: 20,
            bottom: 20,
            right: 20
          },
          xAxis: {
            type: 'category',
            data: this.echartData.map(e => e.month)
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data: this.echartData.map(e => e.amount),
              type: 'bar'
            },
            {
              type: 'line',
              data: this.echartData.map(e => e.num)
            }
          ]
        });
      })
    },
    handleResize() {
      Object.keys(this.instances).forEach(key => {
        this.instances[key]?.resize?.();
      })
    },
  }
};
</script>

<style lang="scss" scoped>
.home__collection {
  .home__collection__content {
    margin: 20px 0;
    display: flex;
    .home__collection__echart-wrap {
      flex: 1;
      margin-right: 30px;
      height: 100%;
      h4 {
        font-size: 14px;
      }
      .home__collection__echart {
        width: 100%;
        height: 160px;
      }
    }
  }
}
</style>
